<template>
  <div class="category">
    <div class="cate" v-for="(item,index) in categoryList" :key="index"  @click ="$router.push('/goods/'+item.categoryId)">
      <img :src="item.imgUrl" >
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>


<script>

export default {
  name: "",
  props: {
    categoryList: {
      type: Array,
      default: function() {
        return [];
      },
      require: true,
    },
  },
};
</script>

<style leng="scss" scoped>
.category {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
height: 165px;
margin-top: 10px;
}
.cate{
    width: 75px;
    height: 75px;
    text-align: center;

}
img {
  width: 40px;
  height: 40px;

}
span{
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 5px;
}
</style>
